<template>
  <div id="dl">
    <div style="margin: auto; width: 57px">
      <van-image width="100%" src="/login_img/dl-logo.png" />
    </div>
    <div id="bd">
      <van-form @submit="register" validate-first @failed="onFailed">
        <van-field
          required
          v-model="pname"
          name="昵称"
          label="昵称"
          placeholder="请输入您的昵称"
          :rules="[
            {
              pattern: /^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){2,8}$/,
              message: '请填写2-8的中英文数字或下划线',
            },
          ]"
        />
        <van-field
          required
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入您的用户名"
          :rules="[
            {
              pattern: /^[a-z0-9]{6,20}$/,
              message: '请填写6-20位字母或数字',
            },
          ]"
        />
        <van-field
          required
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入您的密码"
          :rules="[
            {
              pattern: /^[a-z0-9]{6,20}$/,
              message: '请填写6-20位字母或数字',
            },
          ]"
        />
        <van-field
          required
          v-model="password_again"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="请再次确认您的密码"
          :rules="[
            {
              pattern: /^[a-z0-9]{6,20}$/,
              message: '请填写6-20位字母或数字',
            },
            { validator, message: '两次密码不一致' },
          ]"
        />
        <van-field
          required
          v-model="phone"
          name="电话"
          label="电话"
          placeholder="请输入您电话号码"
          :rules="[
            {
              pattern:
                /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
              message: '请填写正确手机号',
            },
          ]"
        />
        <van-field
          required
          v-model="email"
          name="邮箱"
          label="邮箱"
          placeholder="请输入您的邮箱"
          :rules="[
            {
              pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
              message: '请填写正确邮箱地址',
            },
          ]"
        />
        <div style="margin: 26px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            :disabled="!checked"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
    <div id="text">
      <div class="tologin">
        <router-link to="login">已有账号?登录</router-link>
      </div>
      <van-checkbox
        checked-color="#3eaf7c"
        shape="square"
        v-model="checked"
        icon-size="17px"
      >
        <p>点击注册即表示您已 阅读 并 同意 读者的</p>
      </van-checkbox>
      <p class="text2">
        <router-link to="/service">《服务条款》</router-link> 和
        <router-link to="/agreement">《隐私政策》</router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pname: '',
      username: '',
      password: '',
      password_again: '',
      phone: '',
      email: '',
      time: '',
      checked: false,
    }
  },
  methods: {
    gettime() {
      var moment = require('moment')
      this.time = moment().format('YYYY-MM-DD')
      return this.time
    },
    register(values) {
      console.log('register', values)

      const { pname, username, password, password_again, phone, email, time } =
        this
      this.gettime()

      console.log('time:', this.time)
      let url = 'register'
      let params = `pname=${pname}&uname=${username}&upwd=${password}&password_again=${password_again}&phone=${phone}&email=${email}&time=${this.time}`
      this.axios.post(url, params).then(res => {
        console.log(res)
        console.log('1')
        if (res.data.code == 200) {
          console.log('2')
          this.$toast.success(res.data.msg)
          this.$router.push('/login')
        } else {
          this.$toast.fail(res.data.msg)
        }
      })
    },
    validator(val) {
      if (this.password == val) {
        return true
      } else {
        return false
      }
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
  },
}
</script>
<style lang="scss" scoped>
.van-button {
  background-color: #3eaf7c;
  border: 1px solid #3eaf7c;
  width: 85%;
  margin: 0 auto;
}

form {
  margin-top: 25%;
}
#dl {
  margin-top: 25%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 22px;
  color: #999;
  text-align: center;
}
.text2 a {
  color: #333;
}
#text {
  width: 270px;
  height: 44px;
  margin: 0 auto;
}
form.van-form {
  margin-top: 60px;
}
.text2 {
  text-align: center;
}
.tologin {
  font-size: 12px;
  text-align: center;
  margin-bottom: 10px;
}
.tologin a {
  color: #1faf88;
}
</style>
